<template>
    <div class="page">
      <div class="page-top">
        <!-- 面包屑 -->
        <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
      </div>
      <div class="page-content">
        <a-form-model layout="inline" style="margin-bottom: 20px" :form="form">
          <a-form-model-item label="金蝶编码">
            <a-input v-model="form.kdCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="金蝶组织">
            <a-input v-model="form.jdDept"></a-input>
          </a-form-model-item>
          <a-form-model-item label="管易编码">
            <a-input v-model="form.gyCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="商品名称">
            <a-input v-model="form.goodName"></a-input>
          </a-form-model-item>
          <a-form-model-item label="是否有效">
            <a-select default-value="全部" style="width:100px" v-model="form.useFlag">
              <a-select-option value=1>有效</a-select-option>
              <a-select-option value=0>无效</a-select-option>
              <a-select-option value=-1>全部</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" html-type="submit" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 15px" @click="bindReset">
              重置
            </a-button>
            <a-button @click="openModal" style="margin-left: 15px"> 新增 </a-button>
            <a-button @click="delmultiple" style="margin-left: 15px"> 置为无效 </a-button>
            <a-button @click="usefulmultiple" style="margin-left: 15px"> 置为有效 </a-button>
            <a-button @click="exportGY" style="margin-left: 15px"> 导出 </a-button>
          </a-form-model-item>
        </a-form-model>
              <a-table 
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :columns="columns"
                  :data-source="data"
                  :loading="loading"
                  :pagination="pagination"
                  @change="handleTableChange"
              >
                  <span slot="options" slot-scope="text,record">
            <a-button type="primary" @click="del(record)" v-if='record.useFlag==1'>置为无效</a-button>
            <a-button type="primary" @click="useful(record)" v-else>置为有效</a-button>
            <a-button type="primary" @click="edit(record)" style="margin-left:15px">编辑</a-button>
                  </span>
              </a-table>
        <a-modal v-model="visible" :title="tit" @ok="handleOk" @cancel="closeModal">
          <a-form-model layout="inline" :form='detail'>
            <a-form-model-item label="金蝶编码"> 
              <a-input style="width:300px" v-model="detail.kdCode"></a-input>
            </a-form-model-item>
            <a-form-model-item label="管易编码"> 
              <a-input style="width:300px" v-model="detail.gyCode"></a-input>
            </a-form-model-item>
            <a-form-model-item label="商品名称" in> 
              <a-input style="width:300px" v-model="detail.goodName"></a-input>
            </a-form-model-item>
            <a-form-model-item label="京东事业部" in>
              <a-input style="width:300px" v-model="detail.jdDept"></a-input>
              <!-- <a-select
                style="width: 200px"
                v-model="detail.jdDept"
                @change="handleJdDept"
              >
                 <a-select-option value="yizhuo">一酌事业部</a-select-option>
                <a-select-option value="juhuitongNew">新聚汇通事业部</a-select-option>
                <a-select-option value="guanyi">管易</a-select-option>
              </a-select> -->
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
    </div>
  </template>
  <script>
  import Hreadcrumb from "@/components/Hreadcrumb";
  import { getGyGoodsCodeList,addOrUpdateGyGoodsCode,deleteGyGoodsCode,usefulGyGoodsCode,baseUrl } from "@/request/api";
  import axios from 'axios';
  export default {
    data() {
      return {
              loading:false,
        hreadcrumbAry: [
          { name: "首页", path: "/", query: {} },
          { name: "管易对照表", path: "/KDcompare", query: {} },
        ],
        form: {
          gyCode:"",
          goodName:"",
          kdCode:"",
          useFlag:'1',
          jdDept:''
        },
        detail:{
          gyCode:"",
          goodName:"",
          kdCode:"",
          id:"",
          operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
          jdDept:''
        },
              pagination: { current: 1, size: 10 },
              data: [],
              selectedRowKeys:[],
              columns:[
                  {
            title: "金蝶编码",
            dataIndex: "kdCode",
            key: "kdCode",
            width:''
          },
                  {
            title: "管易编码",
            dataIndex: "gyCode",
            key: "gyCode",
            width:''
          },
                  {
            title: "商品名称",
            dataIndex: "goodName",
            key: "goodName",
            width:''
          },
          {
            title: "金蝶组织",
            dataIndex: "jdDept",
            key: "jdDept",
            width:''
          },
          {
            title: "操作时间",
            dataIndex: "createTime",
            key: "createTime",
            width:120
          },
                  {
            title: "创建人",
            dataIndex: "createBy",
            key: "createBy",
            width:100
          },
                  {
            title: "运行时间",
            dataIndex: "updateTime",
            key: "updateTime",
            width:120
          },
                  {
            title: "更新人",
            dataIndex: "updateBy",
            key: "updateBy",
            width:100
          },
                  {
            title: "编辑",
            dataIndex: "options",
            key: "options",
            slots: { title: "操作" },
            scopedSlots: { customRender: "options" },
            width: "220px",
          },
              ],
        visible:false,
        tit:'编辑'
      };
    },
    components: {
      Hreadcrumb,
    },
      created(){
          this.getGyGoodsCodeList(1,10)
      },
    methods: {
      async getGyGoodsCodeList(p,ps){
               this.loading = true
               let { gyCode,goodName,kdCode,useFlag,jdDept } = this.form
               let params = "p=" + (p -1) + "&ps=" + ps + "&gyCode=" + gyCode + "&goodName=" + goodName + "&kdCode=" + kdCode + "&useFlag=" + useFlag + "&jdDept=" + jdDept
               let { data } = await getGyGoodsCodeList(params);
               console.log(data)
               if(data.success){
                       this.loading = false;
                       let pagination = { ...this.pagination };
              pagination.total = data.content.total;
            this.pagination = pagination
                      this.data = data.content.records
            this.selectedRowKeys = []
               }else{
                       this.loading = false;
               }
          },
          handleTableChange(pagination) {
          console.log(pagination);
          const pager = { ...this.pagination };
          pager.current = pagination.current;
          this.pagination = pager;
          this.getGyGoodsCodeList(pager.current, pager.size);
      },
          onSubmit(e) {
        e.preventDefault();
        console.log(this.form);
        this.getGyGoodsCodeList(1, 10);
      },
          bindReset() {
        this.form = {
          gyCode:"",
          goodName:"",
          kdCode:"",
          useFlag:'1'
        };
        this.getGyGoodsCodeList(1, 10);
      },
          onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
      openModal(){
        this.visible = true
      },
      handleOk(){
        this.addOrUpdateGyGoodsCode()
        this.closeModal()
      },
      edit(record){
        this.detail = {
          id:record.id,
          gyCode:record.gyCode,
          goodName:record.goodName,
          kdCode:record.kdCode,
          operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
          jdDept:record.jdDept
        }
        this.openModal()
      },
      closeModal(){
        this.detail = {
          gyCode:"",
          goodName:"",
          kdCode:"",
          id:"",
          operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
          jdDept:''
        }
        this.visible = false
      },
      async addOrUpdateGyGoodsCode(){
        console.log(this.detail)
        let  { data } = await addOrUpdateGyGoodsCode(this.detail)
        console.log(data)
        if(data.success){
            this.getGyGoodsCodeList(this.pagination.current,10);
        }else{
          this.$message.error(data.content);
        }
      },
      del(record){
        let ids = []
        ids.push(record.id)
        this.confirmDel(ids)
      },
      useful(record){
        let ids = []
        ids.push(record.id)
        this.confirmUseful(ids)
      },
      delmultiple(){
        let ids = []
        this.data && this.data.map((item,i)=>{
          this.selectedRowKeys && this.selectedRowKeys.map(items=>{
            if(i == items){
              ids.push(item.id)
            }
          })
        })
        this.confirmDel(ids)
      },
      usefulmultiple(){
        let ids = []
        this.data && this.data.map((item,i)=>{
          this.selectedRowKeys && this.selectedRowKeys.map(items=>{
            if(i == items){
              ids.push(item.id)
            }
          })
        })
        this.confirmUseful(ids)
      },
      confirmDel(ids){
        let _this = this
        this.$confirm({
          title: '确定置为无效',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.deleteGyGoodsCode(ids)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      },
      confirmUseful(ids){
        let _this = this
        this.$confirm({
          title: '确定置为有效',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.usefulGyGoodsCode(ids)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      },
      handleJdDept(e){
        console.log(e)
        this.detail.jdDept = e
      },
      async deleteGyGoodsCode(arr){
        let _this = this
        let ids = ''
        arr && arr.map(item=>{
          ids += item + ',' 
        })
        let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
        console.log(params)
        let { data } = await deleteGyGoodsCode(params)
        console.log(data)
        if(data.success){
            _this.getGyGoodsCodeList(_this.pagination.current,10);
        }else{
           _this.$message.error(data.content)
        }
      },
      async usefulGyGoodsCode(arr){
        let _this = this
        let ids = ''
        arr && arr.map(item=>{
          ids += item + ',' 
        })
        let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
        console.log(params)
        let { data } = await usefulGyGoodsCode(params)
        console.log(data)
        if(data.success){
            _this.getGyGoodsCodeList(_this.pagination.current,10);
        }else{
          _this.$message.error(data.content)
        }
      },
      exportGY(){
        axios({
          method:'get',
          url:`/erp/exportGyGoodsCodeExcel`,
          data:'',
          responseType:'blob'
        }).then(res=>{
          console.log(res)
          let blob = new Blob([res.data])
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.setAttribute('download','管易商品对照表.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },
    },
  };
  </script>
  <style>
  .page-content {
    background-color: #fff;
    padding: 25px;
  }
  </style>